import { setLocalStorage } from '@/storage'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router'
import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from './store'
import AIMeeting from './components/AiMeeting'
import { Space, SpinLoading, Toast } from 'antd-mobile'

export default observer(() => {
    const store = useLocalObservable(() => Store)
    const {
        query: { access_token, domain, gid, callback_url, training_id, ...restQuery },
    }: any = useLocation()
    const { teacherquickLogin } = store
    const [loading, setLoading] = useState(true)

    /** 1拍卖，2自我介绍，3ai面试 */
    const trainingInfo: any = {
        1: {
            title: '拍卖游戏',
        },
        2: {
            title: '自我介绍',
        },
        3: {
            title: 'AI面试',
            component: <AIMeeting query={{ training_id, ...restQuery }} />,
        },
    }
    const Comp = trainingInfo?.[training_id]?.component
    useEffect(() => {
        document.title = trainingInfo?.[training_id]?.title || '实训'
        setLocalStorage('CALLBACK_URL', callback_url ? decodeURIComponent(callback_url) : '')

        /** 快捷登录 */
        if (access_token && domain && gid) {
            teacherquickLogin({ access_token, domain, gid }).then(() => {
                setLoading(false)
            })
        } else {
            Toast.show({
                content: '登录传参错误，请联系开发人员',
                position: 'top',
                duration: 0,
            })
            setLoading(false)
        }
    }, [])

    if (loading) {
        return (
            <Space style={{ width: '100vw', height: '100vh' }} align="center" justify="center">
                <SpinLoading style={{ '--size': '48px' }} />
            </Space>
        )
    }

    return <div className={styles.container}>{Comp}</div>
})
